<template>
  <div class="search-page">
    <div class="flex-row search-wrap">
      <input class="input" v-model="keyword" placeholder="输入要搜索的电子书名称..." @keyup.13="search">
      <div class="search-btn" @click="search">搜电子书</div>
    </div>
    <div class="flex-row">
      <table cellspacing="0" class="flex-1 result-table">
        <thead>
          <tr>
            <td>文件名</td>
<!--            <td>大小</td>-->
          </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td><i class="fileicon fileicon-pdf"></i><a target="_blank" :href="item.href | raw">{{item.name}}</a></td>
<!--          <td>100m</td>-->
        </tr>
<!--        <tr>-->
<!--          <td><i class="fileicon fileicon-pdf"></i><a href="">简明Python教程.pdf</a></td>-->
<!--          <td>100m</td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--          <td><i class="fileicon fileicon-pdf"></i><a href="">简明Python教程.pdf</a></td>-->
<!--          <td>100m</td>-->
<!--        </tr>-->
        </tbody>
      </table>
<!--      <div style="width: 440px">440px</div>-->
    </div>
    <div class="text-center load-more"  v-if="!list.length">没找到符合要求的数据</div>

    <div class="text-center load-more" @click="$fetch" v-if="more">加载更多</div>
  </div>
</template>

<script>
  export default {
    filters: {
      pdfViewer(src) {
        return "http://txh.lwt.com/pdfjs-2.5.207-dist/web/viewer.html?file=http://txh.lwt.com/github/" + encodeURIComponent(src.replace('https://github.com/', ''))
      },
      raw(src) {
        //
        src = src.replace('/blob/', '/raw/')
        return 'https://github.com' + src
      }
    },
    data() {
      return {
        list: [],
        keyword: '',
        more: true,
        page: 1,
        src: 'http://txh.lwt.com/api/gzns/pdf/download/file/1'
      }
    },
    asyncData({query}) {
      // console.log(router.query.title || '')
      return {
        keyword: query.title || ''
      }

    },

    async fetch() {
      // console.log(this.$route)

      let {code, data} = await this.$axios.$get('/books/pdf/getList', {
        params:{
          title: this.keyword,
          page: this.page
        }
      })
      if (code == 200) {
        this.list = this.list.concat(data.array)
        if (data.array.length > 0) {
          this.page = this.page + 1
        } else {
          this.more = false
        }
      }
      // this.list =
    },
    methods: {
      search() {
        this.page = 1
        this.list = []
        this.more = true
        this.$fetch()
      }
    }
  }
</script>

<style lang="less" scoped>
  .search-wrap {
    width: 800px;
    margin: 30px auto 0;
    justify-content: center;
    .input {
      border: 1px solid #ed510d;
      height: 45px;
      padding: 0 20px;
      flex: 1;
      font-size: 16px;
      outline: none;
    }
    .search-btn {
      display: inline-block;
      background: #ed510d;
      border: 1px solid #ed510d;
      color: white;
      text-decoration: none;
      padding: 0px 20px;
      height: 45px;
      line-height: 45px;
      cursor: pointer;
      user-select: none;
      border-radius: 0 4px 4px 0;
      &:hover {
        background: #ff3622;
      }
      &:active {
        background: #ff5227;
      }
    }
  }
  .result-table {
    tr:hover {
      background: #f5f5f5;
    }
    thead td {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      padding: 24px 4px 10px;
      border-bottom: 1px solid #dddddd;
    }
    tbody td {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      padding: 18px 4px 18px;
      border-bottom: 1px solid #dddddd;
      a {
        color: #333;
        text-decoration: none;
      }
    }

  }
  .load-more {
    padding: 20px;
    font-size: 18px;
    color: #333333;
    cursor: pointer;
  }
</style>
